<template>
  <div>
    <!-- 标题  路由 -->
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <!-- 搜索 -->
    <div>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入院校名称"
      >
        <template #action>
          <div @click="onSearch" class="search">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 正在报名  全部院校 -->
    <div class="applyBox">
      <van-tree-select class="apply" :items="items" :main-active-index.sync="active" >
        <template #content>
          <div v-if="active === 0">

          </div>
          <div v-if="active === 1">
            <!-- banner -->
            <div class="banner">
              <img :src="CollegeRegistrationBanner" style="height: 100px;">
            </div>
            <!-- 学校 -->
            <div>
              <div class="school"><img :src="Loger">&nbsp;&nbsp;<span>金榜登科第一中学</span></div>
              <div class="school"><img :src="Loger">&nbsp;&nbsp;<span>金榜登科第二中学</span></div>
              <div class="school" @click="examination"><img :src="Loger">&nbsp;&nbsp;<span>金榜登科第三中学</span></div>
              <div class="school"><img :src="Loger">&nbsp;&nbsp;<span>金榜登科第四中学</span></div>
              <div class="school"><img :src="Loger">&nbsp;&nbsp;<span>金榜登科第四中学</span></div>
              <div class="school"><img :src="Loger">&nbsp;&nbsp;<span>金榜登科第四中学</span></div>
            </div>
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>

<script>
    import NavBar from '@/components/navBar.vue'
    import CollegeRegistrationBanner from '../../assets/CollegeRegistrationBanner.png'
    import Loger from '../../assets/logea.png'

    export default {
        components: {
            NavBar,

        },
        data() {
            return {
                // 标题  路由
                title: '院校报名',
                route: '/MyHome',
                // 搜索
                value: '',
                // <!-- 正在报名  全部院校 -->
                active: 0,
                items: [
                    {text: '正在报名'}, {text: '全部院校'},],
                CollegeRegistrationBanner,
                Loger
            };
        },
        methods: {
            onSearch(val) {
                this.$router.push('/CollegeRegistrationT')
            },
            onCancel() {
                console.log('asdfas')
            },
            //考试路由
            examination() {
                this.$router.push('examination')
            }
        },

    }
</script>

<style scoped>
.banner{
  margin-left: 10px;
  margin-right: 10px;
}
.banner img {
  width: 100%;
  height: 80px;
}

.school {
  height: 36px;
  margin-left: 10px;
  margin-top: 10px;
}

.school img {
  height: 30px;
  width: 30px;
}

.school span {
  color: rgba(80, 80, 80, 1);
  font-size: 14px;
  line-height: 44px;
  text-align: left;
  position: relative;
  top: -8px;
}
.apply{
  height: calc(100vh - 100px)!important;
}
.van-sidebar-item--select::before{
    background-color: #2a82e4 !important;
}
.search{
  width: 60px;
  height: 30px;
  line-height: 33px;
  background-color: rgba(42, 130, 228, 1);
  color: #fff;
  text-align: center;
  border-radius: 4px;
}
</style>
